<template>
  <div class="index-box">
    <div class="index-left">
      <indexMenuTop :isCollapse="isCollapse"></indexMenuTop>
      <indexMenu :isCollapse="isCollapse" />
    </div>
    <div class="index-right">
      <Header @headerIconHandler="headerIconHandler" :isCollapse="isCollapse"></Header>
      <div class="index-content">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import Header from './indexHeader.vue';
import indexMenu from './indexMenu';
import indexMenuTop from './indexMenuTop';
export default {
  components: {
    Header,
    indexMenu,
    indexMenuTop
  },
  data () {
    return {
      isCollapse: false,
    };
  },
  methods: {
    headerIconHandler () {
      this.isCollapse = !this.isCollapse;
    }
  }
}
</script>

<style scoped>
.index-box {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
}
.index-left {
  height: 100%;
  transition: 0s !important;
  overflow: hidden;
  background: #001525;
}
.el-menu {
  border-right: none !important;
}
.index-right {
  flex: 1;
  height: 100%;
  position: relative;
  background-color: #eeeeef;
}
.index-content {
  position: absolute;
  top: 80px;
  bottom: 20px;
  width: 96%;
  overflow: auto;
  margin-left: 2%;
}
.index-content::-webkit-scrollbar {
  width: 4px;
}
.index-content::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: #808080;
}
.index-content::-moz-scrollbar {
  width: 4px;
}
.index-content::-moz-scrollbar-thumb {
  border-radius: 5px;
  background-color: #808080;
}

</style>
